<script setup>
import { ref, onMounted } from 'vue'
import routes from '@/commons/router'
import { testedApi } from '@/commons/api'
import { useRoute } from 'vue-router'
import Msg from '@/components/message'

let examId
// 加载后调用监听滚动
onMounted(() => {
  examId = useRoute().params.examId
  if(!examId || examId === '' || examId.length !== 21) {
    Msg({ kind: 'error', txt: '系统错误，请重新打开！' })
    return
  }
  localStorage.removeItem('stud')
})

const studRef  = ref({
  realName: '',
  workNo: '',
  mobile: '18173330471',
  deptName: '',
  examId: ''
})

const login = async () => {
  if(studRef.value.realName === '' || studRef.value.realName.length < 2) {
    Msg({ kind: 'error', txt: '请输入真实姓名！' })
    return
  }
  if(studRef.value.workNo === '' || studRef.value.workNo.length < 4) {
    Msg({ kind: 'error', txt: '请输入工号！' })
    return
  }
  if(studRef.value.mobile === '' || studRef.value.mobile.length !== 11) {
    Msg({ kind: 'error', txt: '请输入手机号码！' })
    return
  }
  if(studRef.value.deptName === '') {
    Msg({ kind: 'error', txt: '请选择单位名称！' })
    return
  }
  if(!examId || examId === '' || examId.length !== 21) {
    Msg({ kind: 'error', txt: '系统错误，请重新打开！' })
    return
  }
  studRef.value.examId = examId
  const res = await testedApi(studRef.value)
  if(res.code === '1000') {
    Msg({ kind: 'warn', txt: '您已经答过题了～！' })
  } else {
    localStorage.setItem('stud', JSON.stringify(studRef.value))
    routes.replace('/exam/' + examId)
  }
}

const deptList = ref([
  { text: '黑岱沟露天煤矿', value: '黑岱沟露天煤矿' },
  { text: '哈尔乌素露天煤矿', value: '哈尔乌素露天煤矿' }
])

const deptShow = ref(false)
const setDept = (value) => {
  studRef.value.deptName = value.selectedValues[0]
  deptShow.value = false
}
</script>

<template>
  <div class="a">
    <div class="b">露天煤矿危险源辨识风险管控安全技能竞赛</div>
    <div class="d">
      <div class="e"><input type="text" v-model="studRef.deptName" placeholder="请选择单位" readonly class="ipt" @click="deptShow=true" /></div>
      <div class="e"><input type="text" v-model="studRef.realName" placeholder="请输入姓名" class="ipt" /></div>
      <div class="e"><input type="text" v-model="studRef.workNo" placeholder="请输入工号" class="ipt" /></div>
      <div class="g"><input type="text" v-model="studRef.mobile" placeholder="请输入手机号码" class="ipt" /></div>
      <div class="f" @click="login">进入答题</div>
    </div>
    <van-popup :show="deptShow" round position="bottom">
      <van-picker :columns="deptList" @cancel="deptShow=false" @confirm="setDept" />
    </van-popup>
  </div>
</template>

<style>
.a {width: 100%; height: 100%; overflow: hidden;}
.b {padding: 5rem 0 0 2rem; font-size: 1.4rem; color: #009688; font-weight: bold; text-align: center;}
.c {padding: 0.5rem 0 0 3rem; font-size: 0.9rem; color: #999;}
.d {padding: 2rem;}
.e {padding: 1rem;}
.f {padding: 0.8rem 0; margin-top: 2rem; color: #FFF; background-color: #2f73ff; border: 0; border-radius: 10px; cursor: pointer; text-align: center; font-size: 1.2rem;}
.g {display: none;}
</style>